<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>视频管理</title>
<style type="text/css">
input[type=radio], input[type=checkbox] {
	width: 20px;
	height: 20px;
}
</style>

<%@ include file="../common/importLib.jsp"%>
<script type="text/javascript" src="/mrjy/common/jquery-easyui/js/jquery.jdirk.js"></script>
<script type="text/javascript" src="/mrjy/common/jquery-easyui/js/jeasyui.extensions.combobox.autoComplete.js"></script>
<script type="text/javascript">
	var videoFileSize = 0;

	/**
	 * 增删改查参数设置
	 */
	tableTitle = "视频表";
	tableURL = getTimeURL("videoInfo/queryPage.do");
	toolbarView = 4;
	tableColumns = [ [
			{
				field : 'ck',
				checkbox : true
			},
			{
				field : 'id',
				title : 'id',
				width : 0,
				rowspan : 1
			},
			{
				field : 'opt',
				title : '操作',
				width : 200,
				align : 'center',
				rowspan : 1,
				formatter : function(value, rowData, rowIndex) {
					var queryUrl = 'videoInfo/queryById.do?id=' + rowData.id;
					var html = "<a title='修改' class='xxl_linkbutton' iconCls='icon-edit' href='javascript:datagridUpdate(\""
							+ queryUrl
							+ "\")'>修改</a>"
							+ "<a title='修改' class='xxl_linkbutton' iconCls='icon-edit' href='javascript:datagridUpdateGrade(\""
							+ rowData.id + "\")'>修改年级</a>";
					return html;
				}
			},
			{
				field : 'videoPlayStr',
				title : '播放',
				width : 70,
				align : 'center',
				rowspan : 1,
				formatter : function(value, rowData, rowIndex) {
					return "<a title='播放' class='xxl_linkbutton' iconCls='icon-player' href='javascript:playVideo(\""
							+ rowData.videoCode + "\")'>播放</a>";
				}
			},{field:'picName',title:'照片',width:60,rowspan:1,
				formatter:function(value,rowData,rowIndex){
					if(rowData.picName==""){
						return "";
					}else{
						var url=mrjyFile+"maintain/videopic/"+rowData.picName+"?"+new Date().getTime();
						return "<img onclick=\"viewPic('"+url+"')\" src='"+url+"' style='width:50px;height:40px;'/>";
					}
				}}, {
				field : 'freeFlag',
				title : '免费状态',
				width : 80,
				align : 'center',
				rowspan : 1,
				formatter : function(value, rowData, rowIndex) {
					if (rowData.freeFlag == 1) {
						return "<font color='green'>是</font>";
					} else {
						return "<font color='red'>否</font>";
					}
				}
			}, {
				field : 'hotFlag',
				title : '热门状态',
				width : 80,
				align : 'center',
				rowspan : 1,
				formatter : function(value, rowData, rowIndex) {
					if (rowData.hotFlag == 1) {
						return "<font color='green'>游客</font>";
					} else if (rowData.hotFlag == 2) {
						return "<font color='green'>会员</font>";
					} else if (rowData.hotFlag == 3) {
						return "<font color='green'>全部</font>";
					} else {
						return "<font color='red'>否</font>";
					}
				}
			}, {
				field : 'orderNum',
				title : '视频次序',
				width : 80,
				align : 'center',
				rowspan : 1
			}, {
				field : 'userName',
				title : '主讲人',
				width : 80,
				rowspan : 1
			}, {
				field : 'typeName',
				title : '视频类型',
				width : 80,
				rowspan : 1
			},
			//{field:'gradeName',title:'视频年级',width:80,rowspan:1},	                
			//{field:'videoCode',title:'编号',width:210,rowspan:1},	
			{
				field : 'videoName',
				title : '名称',
				width : 250,
				rowspan : 1
			}, {
				field : 'fileSize',
				title : '视频大小(MB)',
				width : 120,
				rowspan : 1
			}, {
				field : 'duration',
				title : '播放时长',
				width : 70,
				rowspan : 1
			}, {
				field : 'createTime',
				title : '创建时间',
				width : 130,
				rowspan : 1,
			//formatter:function(value,rowData,rowIndex){
			//	return new Date(rowData.createTime);
			//}
			},
			{
				field : 'playTimes',
				title : '播放次数',
				width : 70,
				rowspan : 1,
				formatter:function(value,rowData,rowIndex){
					var url = "http://v.polyv.net/uc/services/rest?method=getById&readtoken="+readtoken+"&vid=" + rowData.videoCode;
					var times = 0; 
					$.ajax({
						url:url,
						async: false,
						success:function(data){
							try{
								times =  data.data[0].times;
							}catch(e){}
						},
						error: function(err){
							console.log(err);
						}
					});
					return times;
				}
			},
			{
				field : 'disableFlag',
				title : '禁用状态',
				width : 80,
				align : 'center',
				rowspan : 1,
				formatter : function(value, rowData, rowIndex) {
					if (rowData.disableFlag == 0) {
						return "<font color='green'>起用</font>";
					} else {
						return "<font color='red'>禁用</font>";
					}
				}
			} ] ];

	var addWidth = 830; //添加窗口宽度
	var addHeight = 520; //添加窗口高度
	var addTitle = "添加视频"; //添加标题
	var updateWidth = 830; //修改窗口宽度
	var updateHeight = 520; //修改窗口高度
	var updateTitle = "修改视频"; //修改标题
	var updateDisableFlagUri = "videoInfo/updateDisableFlag.do"; //禁用、起用记录
	var deleteUri = "videoInfo/deleteByIds.do"; //删除记录

	/**
	 * 初始化添加表单
	 */
	function initAddForm() {
		addFormProcess("videoName", "视频", true);
		//baseFormValidator("videoName","视频名称",1,50);
		//baseFormValidator("videoDesc","视频简称",1,120);
		$("#freeFlag").find('input[value="0"]').prop("checked", "checked");
		$("#hotFlag").find('input[value="0"]').prop("checked", "checked");
		$("#userId").combobox({
			url : "../maintain/userInfo/userListNoPage.do?roleId=2",
			valueField : 'id',
			textField : 'text',
			editable : true,
			onSelect : function(data) {
			}
		}); 
		/* $("#typeId").combobox({
			url : "../video/videoType/queryList.do",
			valueField : 'id',
			textField : 'typeName',
			editable : false,
			onSelect : function(data) {
			}
		}); */
		//多选框视频类型
		getVideoTypeList("videoTypeDiv");
		
		var order = [];
		for (var i = 1; i <= 30; i++) {
			order.push({
				num : i
			});
		}
		$("#orderNum").combobox({
			data : order,
			valueField : 'num',
			textField : 'num',
			editable : false,
			onSelect : function(data) {
			}
		});
		
		openPicUpload();
		openPicUpload2();
	}

	/**
	 * 初始化修改表单
	 */
	function initUpdateForm(jsonObject) {
		//combobox_frist_subject_teacher("subjectTypeIdUpdate","userIdUpdate","../maintain/userInfo/querySubjectType.do","../maintain/userInfo/schoolSubjectTeacher.do?subjectTypeId=",jsonObject.subjectTypeId,jsonObject.userId);
		$("#videoCodeUpdate").val(jsonObject.videoCode);
		$("#durationUpdate").val(jsonObject.duration);
		$("#videoNameUpdate").val(jsonObject.videoName);
		$("#videoDescUpdate").val(jsonObject.videoDesc);
		$("#beforeVideoCode").val("");
		$("#idUpdate").val(jsonObject.id);
		//numCombobox_3("videoFeeUpdate",jsonObject.videoFee,2,0,100);

		$("#freeFlagUpdate").find('input[value="' + jsonObject.freeFlag + '"]')
				.prop("checked", "checked");
		$("#hotFlagUpdate").find('input[value="' + jsonObject.hotFlag + '"]')
				.prop("checked", "checked");

		updateFormProcess("videoNameUpdate", "视频");
		baseFormValidator("videoNameUpdate", "视频名称", 1, 50);
		//baseFormValidator("videoDescUpdate","视频简称",1,120);
		//combobox_select_frist("userIdUpdate","../maintain/userInfo/userListNoPage.do?roleId=2",true,jsonObject.userId);
		$("#userIdUpdate").combobox({
			url : "../maintain/userInfo/userListNoPage.do?roleId=2",
			valueField : 'id',
			textField : 'text',
			editable : true,
			onSelect : function(data) {
			}
		}).combobox("select", jsonObject.userId);
		/* $("#typeIdUpdate").combobox({
			url : "../video/videoType/queryList.do",
			valueField : 'id',
			textField : 'typeName',
			editable : false,
		}).combobox("select", jsonObject.typeId); */
		//添加视频类型
		getVideoTypeList("videoTypeUpdateDiv");
		if(jsonObject.typeIds){
			var typeIds = jsonObject.typeIds;
			var box = $("[name='typeIds']");
			for(var i = 0 ; i < typeIds.length; i++){
				for(var j = 0; j < box.length; j++){
					if(box[j].value==typeIds[i]){ 
						box[j].checked = true; 
					} 
				}
			}
		}
		
		var order = [];
		for (var i = 1; i <= 30; i++) {
			order.push({
				num : i
			});
		}
		$("#orderNumUpdate").combobox({
			data : order,
			valueField : 'num',
			textField : 'num',
			editable : false,
			onSelect : function(data) {
			}
		}).combobox("select", jsonObject.orderNum);
		
		$("#picNameUpdate").val(jsonObject.picName);
		$("#uploadPicUpdate").attr("src",mrjyFile+"maintain/videopic/"+jsonObject.picName+"?"+new Date().getTime());

		$("#coverUrlUpdate").val(jsonObject.coverUrl);
		$("#uploadPicUpdate2").attr("src",mrjyFile+"maintain/videopic/"+jsonObject.coverUrl+"?"+new Date().getTime());
		
		openPicUploadUpdate();
		openPicUploadUpdate2();
	}

	$(function() {
		$('#uploadFile')
				.uploadify(
						{
							'auto' : true,
							'formData' : {
								'fcharset' : 'UTF-8',
								'writetoken' : writetoken,
								'JSONRPC' : '{"title": "mrjy"}'
							},
							'buttonImage' : '/mrjy/common/uploadify/button_image_1.png',
							'width' : 100,
							'height' : 30,
							'fileSizeLimit' : '200MB',
							'fileTypeDesc' : '视频文件',
							'fileTypeExts' : '*.mp4',
							'swf' : '/mrjy/common/uploadify/uploadify.swf',
							'uploader' : 'http://v.polyv.net/uc/services/rest?method=uploadfile',
							'onDialogOpen' : function() {
								$("#uploadMessage").html("");
							},
							'onSelect' : function(file) {
								videoFileSize = (file.size / (1024 * 1024) + 0.01)
										.toFixed(2);
							},
							'onSelectError' : function(file, errorCode,
									errorMsg) {
								if (errorCode == -130) {
									$("#uploadMessage")
											.html(
													"<img src='/mrjy/common/images/error.gif' style='vertical-align: middle;'/><font color='red'>"
															+ file.name
															+ "不是mp4视频文件，上传失败!</font>");
								} else if (errorCode == -110) {
									$("#uploadMessage")
											.html(
													"<img src='/mrjy/common/images/error.gif' style='vertical-align: middle;'/><font color='red'>"
															+ file.name
															+ "超过上传上限（200MB），上传失败!</font>");
								}
							},
							'onUploadSuccess' : function(file, data, response) {
								if (videoFileSize > 0) {
									$("#videoFileSize").val(videoFileSize);
								}
								var jsonobj = eval('(' + data + ')');
								$("#videoCode").val(jsonobj.data[0].vid);
								$("#duration").val(jsonobj.data[0].duration);
								$("#uploadMessage")
										.html(
												"<img src='/mrjy/common/images/success.gif' style='vertical-align: middle;'/><font color='green'>文件上传成功！</font>");
								$("#uploadMessage").fadeIn(1000).fadeOut(3000,
										function() {
											$("#uploadMessage").html('');
										});
							}
						});

		$('#uploadFileUpdate')
				.uploadify(
						{
							'auto' : true,
							'formData' : {
								'fcharset' : 'UTF-8',
								'writetoken' : writetoken,
								'JSONRPC' : '{"title": "mrjy"}'
							},
							'buttonImage' : '/mrjy/common/uploadify/button_image_1.png',
							'width' : 100,
							'height' : 30,
							'fileSizeLimit' : '200MB',
							'fileTypeDesc' : '视频文件',
							'fileTypeExts' : '*.mp4',
							'swf' : '/mrjy/common/uploadify/uploadify.swf',
							'uploader' : 'http://v.polyv.net/uc/services/rest?method=uploadfile',
							'onDialogOpen' : function() {
								$("#uploadMessageUpdate").html("");
							},
							'onSelectError' : function(file, errorCode,
									errorMsg) {
								if (errorCode == -130) {
									$("#uploadMessageUpdate")
											.html(
													"<img src='/mrjy/common/images/error.gif' style='vertical-align: middle;'/><font color='red'>"
															+ file.name
															+ "不是mp4视频文件，上传失败!</font>");
								} else if (errorCode == -110) {
									$("#uploadMessageUpdate")
											.html(
													"<img src='/mrjy/common/images/error.gif' style='vertical-align: middle;'/><font color='red'>"
															+ file.name
															+ "超过上传上限（200MB），上传失败!</font>");
								}
							},
							'onUploadSuccess' : function(file, data, response) {
								//$.get("http://v.polyv.net/uc/services/rest?method=delVideoById&writetoken=YgZ2cLxN2miq8na-gNpHuL6gfXXwG5J1&vid=" + $("#videoCodeUpdate").val(),function(data){});
								$("#beforeVideoCode").val(
										$("#videoCodeUpdate").val());
								var jsonobj = eval('(' + data + ')');
								$("#videoCodeUpdate").val(jsonobj.data[0].vid);
								$("#durationUpdate").val(
										jsonobj.data[0].duration);
								$("#uploadMessageUpdate")
										.html(
												"<img src='/mrjy/common/images/success.gif' style='vertical-align: middle;'/><font color='green'>文件上传成功！</font>");
								$("#uploadMessageUpdate").fadeIn(1000).fadeOut(
										3000, function() {
											$("#uploadMessageUpdate").html('');
										});
							}
						});
		//$('body').everyTime('100s',function(){
		//定时刷新查看视频审批状态
		//$('#datagrid_table').datagrid('reload');
		//});			
	});

	function playVideo(vid) {
		$.colorbox({
			iframe : true,
			width : 900,
			height : 700,
			opacity : 0.5,
			overlayClose : true,
			href : "play_video.jsp?vid=" + vid
		}).click();
	}

	function submitForm() {
		$
				.get(
						"http://v.polyv.net/uc/services/rest?method=delVideoById&writetoken="+writetoken+"&vid="
								+ $("#beforeVideoCode").val(), function(data) {
						});
		$('#update_form').submit();
	}

	function cancelForm() {
		if ($("#beforeVideoCode").val() == "") {
			$('#datagrid_update').window('close');
		} else {
			$
					.get(
							"http://v.polyv.net/uc/services/rest?method=delVideoById&writetoken="+writetoken+"&vid="
									+ $("#videoCodeUpdate").val(), function(
									data) {
							});
			$('#datagrid_update').window('close');
		}
	}

	/**
	 *删除记录之后执行函数
	 */
	function afterDelete() {
		$
				.get(
						"artVideo/sessionArtVideos.do",
						function(data) {
							for (var i = 0; i < data.length; i++) {
								$
										.get(
												"http://v.polyv.net/uc/services/rest?method=delVideoById&writetoken="+writetoken+"&vid="
														+ data[i].videoCode,
												function(data) {
												});
							}
						}, "json");
	}

	function clearForm() {
		$('#teaId').combobox('clear');
		$("#pId").val("");
	}

	function addFormSubmit() {
		var videoCode = "";
		try {
			videoCode = $("#videoCode").val();
		} catch (e) {
			console.log(e);
		} finally {
			if (videoCode) {
				$('#add_form').submit();
				$('#datagrid_add').window('close');
				$('#datagrid_table').datagrid('reload');
			} else {
				$.messager.alert('提示', '请确保添加的信息完整！');
			}
		}
	}
	/**
	 *打开照片上传组件
	 */
	function openPicUpload(){
		uploadOneFile("uploadPoster","/mrjy_file/common/util/upload.do","1000KB",100,30,"uploadPosterMessage","backup/maintain/videopic/","picName","uploadPic");
	}
	/**
	 *打开16:9照片上传组件
	 */
	function openPicUpload2(){
		uploadOneFile("uploadPoster2","/mrjy_file/common/util/uploadImg3.do?width=640&height=360","1000KB",100,30,"uploadPosterMessage2","backup/maintain/videopic/","coverUrl","uploadPic2");
	}
	
	/**
	 *打开修改照片上传组件
	 */
	function openPicUploadUpdate(){
		uploadOneFile("uploadPosterUpdate","/mrjy_file/common/util/upload.do","1000KB",100,30,"uploadPosterMessageUpdate","backup/maintain/videopic/","picNameUpdate","uploadPicUpdate");
	}
	/**
	 *打开16:9照片上传组件
	 */
	function openPicUploadUpdate2(){
		uploadOneFile("uploadPosterUpdate2","/mrjy_file/common/util/uploadImg3.do?width=640&height=360","1000KB",100,30,"uploadPosterMessageUpdate2","backup/maintain/videopic/","coverUrlUpdate","uploadPicUpdate2");
	}
</script>
<script type="text/javascript">
	$(function() {
		$("#userIdQuery").combobox({
			url : "../maintain/userInfo/userListNoPage.do?roleId=2",
			valueField : 'id',
			textField : 'text',
			editable : true,
			onSelect : function(data) {
			}
		});
		$("#typeIdQuery").combobox({
			url : "../video/videoType/queryList.do",
			valueField : 'id',
			textField : 'typeName',
			editable : true,
			onSelect : function(data) {
			}
		});
		$("#gradeIdQuery").combobox({
			url : "../maintain/gradeInfo/queryList.do",
			valueField : 'id',
			textField : 'gradeName',
			editable : true
		});

		$("#hotFlagQuery").combobox({
			data : [ {
				flag : 1,
				text : "游客"
			}, {
				flag : 2,
				text : "会员"
			}, {
				flag : 3,
				text : "全部"
			} ],
			valueField : 'flag',
			textField : 'text',
			editable : true
		});
	});
</script>

<script>
	/**
	 * 修改
	 */
	function datagridUpdateGrade(videoId) {
		var url = "videoGrade/queryList.do?videoId=" + videoId;
		$.post(url, function(jsonObject) {
			console.log(jsonObject);
			showUpdateGradeForm();
			initUpdateGradeForm(jsonObject, videoId); //初始化修改表单		
		}, "json");
	}

	function showUpdateGradeForm() {
		var updateGradeWidth = 600; //添加窗口宽度
		var updateGradeHeight = 400; //添加窗口高度x
		var updateGradeTitle = "修改视频年级"; //添加标题
		$('#datagrid_update_grade').css("display", "block");
		$('#datagrid_update_grade').window({
			title : updateGradeTitle,
			modal : true,
			width : updateGradeWidth,
			height : updateGradeHeight,
			shadow : false,
			closed : false,
			minimizable : false,
			maximizable : false,
			collapsible : false,
			iconCls : 'icon-edit',
			resizable : false,
			top : 100,
			left : ($(window).width() - updateGradeWidth) * 0.5
		});
		clearFormData($("#update_grade_form")); //清空表单历史数据
	}
	/**
	 * 修改
	 */
	function initUpdateGradeForm(jsonArray, videoId) {
		clearFormData("update_grade_form");
		$("#videoIdUpdate").val(videoId);
		var gradeIds = [];
		for (var i = 0, len = jsonArray.length; i < len; i++) {
			gradeIds.push(jsonArray[i].gradeId);
		}
		$.getJSON("../maintain/gradeInfo/queryList.do",
			function(data) {
				console.log(data);
				var html = '';
				for (var i = 0, len = data.length; i < len; i++) {
					var gradeId = data[i].id;
					html += '<div style="display:inline-block;width:200px;">';
					if (!!~gradeIds.indexOf(gradeId)) {
						html += '<input type="checkbox" name="gradeIds" value="' + gradeId + '"/ checked="checked">'
								+ data[i].gradeName;
					} else {
						html += '<input type="checkbox" name="gradeIds" value="' + gradeId + '"/>'
								+ data[i].gradeName;
					}
					html += '</div>';
				}
				$("#gradeIds").html(html);
				
				//获取选中的checkbox数
				var gradeIdsbox = $("input[type='checkbox'][name='gradeIds']").length; //获取所有checkbox数
			    var checkedbox = $("input[type='checkbox'][name='gradeIds']:checked").length; //获取选中的checkbox个数  
			    if (gradeIdsbox == checkedbox) {  
			        $("#checkAll").attr("checked", true);  
			    }
		}); 
		
	}
	
	//全选、取消全选的事件  
	function selectAll(){  
	    if ($("#checkAll").attr("checked")) {
	    	$("input[name='gradeIds']").each(function(){
	    		if(!$(this).attr('checked')){
	    			$(this).attr("checked",true);
	    		}
	    	});
	    } else {  
	    	$("input[name='gradeIds']").each(function(){
    			$(this).attr("checked",false);
	    	});
	    } 
	}
	
	/**
	 * 修改表单处理
	 */
	function updateGradeFormProcess(focusId, messagerFlag) {
		formSubmitOnce = true; //每次打开窗口formSubmitOnce都重新设为true
		$("#" + focusId).focus(); //光标定位
		var updateGradeForm = $('#update_grade_form');
		$.formValidator.initConfig({
			formID : updateGradeForm.attr("id"),
			submitOnce : true,
			onSuccess : function() {
				if (formSubmitOnce == true) {
					formSubmitOnce = false;
					$.post(updateGradeForm.attr("action"), updateGradeForm
							.serialize(), function(data) {
						if (data == "ok") {
							$('#datagrid_delete').window('close'); //关闭修改窗口
							$.messager.alert("修改成功", messagerFlag + "修改成功！",
									'info'); //提示修改信息成功							
							$('#datagrid_table').datagrid('reload');
						}
						if (data.split("_")[0] == "uniqueValue") {
							formSubmitOnce = true;
							$.messager.alert("修改失败", data.split("_")[1]
									+ "修改失败！", 'info');
						}
					}, "json");
					return false;
				}
			}
		});
	}

	function submitUpdateGradeForm(from) {
		var nameVal = "";
		$("#" + from + " :input[type='checkbox']:checked").each(function() {
			nameVal = $(this).val();
		});
		if (nameVal == "") {
			$.messager.alert("不能为空", "年级不能为空", 'error');
		} else {
			//$('#'+from).submit();
			var updateGradeForm = $('#update_grade_form');
			var messagerFlag = "年级信息";
			$.post(updateGradeForm.attr("action"), updateGradeForm.serialize(),
					function(data) {
						if (data == "ok") {
							//$('#datagrid_udpate_grade').window('close');  //关闭修改窗口
							$.messager.alert("修改成功", messagerFlag + "修改成功！",
									'info'); //提示修改信息成功							
							//$('#datagrid_table').datagrid('reload');
							$('#datagrid_update_grade').window('close');
						}
						if (data.split("_")[0] == "uniqueValue") {
							$.messager.alert("修改失败", data.split("_")[1]
									+ "修改失败！", 'info');
						}

					}, "json");
		}
	}

	function cancelUpdateGradeForm() {
		$('#datagrid_update_grade').window('close');
	}
	//获取视频类型信息
	function getVideoTypeList(divId){
		$.ajax({
			  type: 'GET',
			  url: '../video/videoType/queryCanUseList.do',
			  data: {"disableFlag":0},
			  dataType: 'json',
			  async: false,
			  success: function(data){
				  console.log(data);
					var html = "<table>"
					for (var i = 0, len = data.length; i < len; i++) {
						var video = data[i];
						if(i % 5 == 0){
							if (i == 0) {
								html += "<tr>";
							}else {
								html += "</tr><tr>"
							}
							html += "<td><input type='checkbox' name='typeIds' value='"+ video.id +"'/>"+ video.typeName +"</td>";
						}else{
							html += "<td><input type='checkbox' name='typeIds' value='"+ video.id +"'/>"+ video.typeName +"</td>";
						}
												
					}
					html += "</tr></table>";
					$("#"+divId).html(html); 
			  },
			  error: function(xhr, type){
			    alert('Ajax error!')
			  }
		});
		
	}
</script>

</head>
<body id="layout" class="easyui-layout">
	<div
		style="background: none repeat scroll 0% 0% #EFEFEF; height: 68px; padding: 6px 2px; border-bottom: 1px solid #CCC;"
		region="north" split="false" title="条件查询">
		<form id="searchForm">
			<table>
				<tr>
					<td>主讲老师：</td>
					<td><input type="text" id="userIdQuery" name="userId"
						style="width: 120px" /></td>
					<td>视频类型：</td>
					<td><input type="text" id="typeIdQuery" name="typeId"
						style="width: 120px" /></td>
					<!-- 
			<td>视频年级：</td>
			<td><input type="text" id ="gradeIdQuery" name="gradeId" style="width: 120px"/></td>
			-->
					<td>热门状态：</td>
					<td><input id="hotFlagQuery" name="hotFlag"
						style="width: 120px" /></td>
					<td>视频名称：</td>
					<td><input type="text" id="videoNameQuery" name="videoName"
						style="width: 120px" /></td>
					<td><a class="easyui-linkbutton" id="search"
						iconCLs="icon-search" onclick="searchTable()">搜索</a></td>
					<td><a class="easyui-linkbutton" iconCls="icon-undo"
						onclick="document.getElementById('searchForm').reset();clearForm();reload();">清空</a></td>
				</tr>
			</table>
		</form>
	</div>
	<div region="center" style="font-family: 微软雅黑">
		<!-- datagrid信息表 -->
		<table id="datagrid_table"></table>
	</div>
	<!-- 添加记录 -->
	<div id="datagrid_add">
		<form id="add_form" action="videoInfo/insert.do" method="Get">
			<input type="hidden" id="picName" name="picName" onclick='openPicUpload()'>
			<input type="hidden" id="coverUrl" name="coverUrl" onclick='openPicUpload2()'>
			<table border="0" width="770" class="xxl_tb_1"
				style="font-size: 13px">
				<tbody>
					<tr>
						<td colspan="3" class="xxl_ft_6">操作步骤：<br>&nbsp;&nbsp;&nbsp;&nbsp;1.上传视频。
							<br>&nbsp;&nbsp;&nbsp;&nbsp;2.视频上传完毕，系统自动生成视频编号、播放时长、视频大小。
						</td>
					</tr>
					<tr>
						<td class="xxl_td_1">上传视频：</td>
						<td colspan="2"><input id='uploadFile' type='file'
							name='uploadFile' /><span id='uploadMessage'
							style='margin-left: 10px'></span></td>
					</tr>
					<tr>
						<td class="xxl_td_1">视频编号：</td>
						<td width="250"><input type="text" id="videoCode"
							name="videoCode" readonly="readonly" style="border: none"
							class="xxl_ipt_2" /></td>
						<td width="300"><div id="videoCodeTip" style="width: 250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_1">视频大小(MB)：</td>
						<td colspan="1"><input type="text" id="videoFileSize"
							name="fileSize" readonly="readonly" style="border: none"
							class="xxl_ipt_2" /></td>
						<td width="300"><div id="videoFileSizeTip"
								style="width: 250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_1">播放时长：</td>
						<td colspan="2"><input type="text" id="duration"
							name="duration" readonly="readonly" style="border: none"
							class="xxl_ipt_2" /></td>
					</tr>
					<tr>
						<td class="xxl_td_1" width="120">视频名称：</td>
						<td width="250"><input type="text" id="videoName"
							name="videoName" class="xxl_ipt_2" /></td>
						<td width="300"><div id="videoNameTip" style="width: 250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_1">视频内容简介：</td>
						<td><textarea rows="5" cols="50" name="videoDesc"></textarea></td>
						<td><div id="videoDescTip" style="width: 200px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_1">免费视频：</td>
						<td colspan="2" id="freeFlag"><input type="radio"
							name="freeFlag" value="0" checked="checked" />否 <input
							type="radio" name="freeFlag" value="1" />是</td>
					</tr>
					<tr>
						<td class="xxl_td_1">热门视频：</td>
						<td colspan="2" id="hotFlag"><input type="radio"
							name="hotFlag" value="0" checked="checked" />否 <input
							type="radio" name="hotFlag" value="1" />游客 <input type="radio"
							name="hotFlag" value="2" />会员 <input type="radio" name="hotFlag"
							value="3" />全部</td>
					</tr>
					<tr>
						<td class="xxl_td_1">主讲老师：</td>
						<td colspan="1"><input type="text" id="userId" name="userId" /></td>
						<td><div id="userIdTip" style="width: 200px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_1">视频类型：</td>
						<td colspan="5">
							<div id="videoTypeDiv">
								
							</div>
						</td>
					</tr>
					<!-- 
					<tr>
						<td  class="xxl_td_1">视频年级：</td>
						<td colspan="2"><input type="text" id="gradeId" name="gradeId" /></td>
					</tr>
					 -->
					<tr>
						<td class="xxl_td_1">视频次序：</td>
						<td colspan="2"><input type="text" id="orderNum"
							name="orderNum" /></td>
					</tr>
					<!-- <tr >
						<td class="xxl_td_2">上传照片：</td>
						<td><input id='uploadPoster' type='file' name='uploadPoster'/><span id='uploadPosterMessage' style='margin-left:10px'></span></td>	
							<td ><img style="height: 80px;width: 80px;" id="uploadPic" src=""/><div style="color:red"> *照片后缀名为png，格式为200*200px</div></td>
					</tr> -->
					<tr >
						<td class="xxl_td_2">上传视频封面照片：</td>
						<td><input id='uploadPoster2' type='file' name='uploadPoster'/><span id='uploadPosterMessage2' style='margin-left:10px'></span></td>	
							<td ><img style="height: 72px;width: 128px;" id="uploadPic2" src=""/><div style="color:red"> *照片后缀名为png，格式为640*360px</div></td>
					</tr>
					<tr>
						<td colspan="3" style="text-align: center"><a
							class="easyui-linkbutton" iconCls="icon-ok"
							onclick="addFormSubmit()">添加</a> <a class="easyui-linkbutton"
							iconCls="icon-undo"
							onclick="document.getElementById('add_form').reset()">重置</a> <a
							class="easyui-linkbutton" iconCls="icon-cancel"
							onclick="$('#datagrid_add').window('close');">取消</a></td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>

	<!-- 修改记录 -->
	<div id="datagrid_update">
		<form id="update_form" action="videoInfo/updateById.do" method="post">
			<input type="hidden" id="idUpdate" name="id" />
			<input type="hidden"
				id="beforeVideoCode" name="VideoCode" />
			<input type="hidden" id="picNameUpdate" name="picName" onclick='openPicUploadUpdate()'>
			<input type="hidden" id="coverUrlUpdate" name="coverUrl" onclick='openPicUploadUpdate2()'>
			<table border="0" width="770" class="xxl_tb_1">
				<tbody>
					<tr>
						<td class="xxl_td_1">上传视频：</td>
						<td colspan="2"><input id='uploadFileUpdate' type='file'
							name='uploadFile' /><span id='uploadMessageUpdate'
							style='margin-left: 10px'></span></td>
					</tr>
					<tr>
						<td width="120" class="xxl_td_1">视频编号：</td>
						<td width="250"><input type="text" id="videoCodeUpdate"
							name="videoCode" readonly="readonly" style="border: none"
							class="xxl_ipt_2" /></td>
						<td width="300"><div id="videoCodeUpdateTip"
								style="width: 250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_1">播放时长：</td>
						<td><input type="text" id="durationUpdate" name="duration"
							readonly="readonly" style="border: none" class="xxl_ipt_2" /></td>
						<td><div id="durationUpdateTip" style="width: 250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_1">视频名称：</td>
						<td><input type="text" id="videoNameUpdate" name="videoName"
							class="xxl_ipt_2" /></td>
						<td><div id="videoNameUpdateTip" style="width: 250px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_1">视频内容简介：</td>
						<td><textarea id="videoDescUpdate" rows="5" cols="50"
								name="videoDesc"></textarea></td>
						<td><div id="videoDescUpdateTip" style="width: 200px"></div></td>
					</tr>
					<tr>
						<td class="xxl_td_1">免费视频：</td>
						<td colspan="2" id="freeFlagUpdate"><input type="radio"
							name="freeFlag" value="0" checked="checked" />否 <input
							type="radio" name="freeFlag" value="1" />是</td>
					</tr>
					<tr>
						<td class="xxl_td_1">热门视频：</td>
						<td colspan="2" id="hotFlagUpdate"><input type="radio"
							name="hotFlag" value="0" checked="checked" />否 <input
							type="radio" name="hotFlag" value="1" />游客 <input type="radio"
							name="hotFlag" value="2" />会员 <input type="radio" name="hotFlag"
							value="3" />全部</td>
					</tr>
					<tr>
						<td class="xxl_td_1">主讲老师：</td>
						<td colspan="2"><input type="text" id="userIdUpdate"
							name="userId" /></td>
					</tr>
					<!-- <tr>
						<td class="xxl_td_1">视频类型：</td>
						<td colspan="2"><input type="text" id="typeIdUpdate"
							name="typeId" /></td>
					</tr> -->
					<tr>
						<td class="xxl_td_1">视频类型：</td>
						<td colspan="5">
							<div id="videoTypeUpdateDiv">
								
							</div>
						</td>
					</tr> 
					
					<!-- 
					<tr>
						<td  class="xxl_td_1">视频年级：</td>
						<td colspan="2"><input type="text" id="gradeIdUpdate" name="gradeId" /></td>
					</tr>
					 -->
					<tr>
						<td class="xxl_td_1">视频次序：</td>
						<td colspan="2"><input type="text" id="orderNumUpdate"
							name="orderNum" /></td>
					</tr>
					<!-- <tr >
						<td class="xxl_td_2">上传照片：</td>
						<td><input id='uploadPosterUpdate' type='file' name='uploadPoster'/><span id='uploadPosterMessageUpdate' style='margin-left:10px'></span></td>	
							<td ><img style="height: 80px;width: 80px;" id="uploadPicUpdate" src=""/><div style="color:red"> *照片后缀名为png，格式为200*200px</div></td>
					</tr> -->
					<tr >
						<td class="xxl_td_2">上传视频封面照片：</td>
						<td><input id='uploadPosterUpdate2' type='file' name='uploadPoster'/><span id='uploadPosterMessageUpdate2' style='margin-left:10px'></span></td>	
							<td ><img style="height: 72px;width: 128px;" id="uploadPicUpdate2" src=""/><div style="color:red"> *照片后缀名为png，格式为640*360px</div></td>
					</tr>
					<tr>
						<td colspan="3" style="text-align: center"><a
							class="easyui-linkbutton" iconCls="icon-ok"
							onclick="submitForm()">修改</a> <a class="easyui-linkbutton"
							iconCls="icon-cancel" onclick="cancelForm()">取消</a></td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>

	<div id="datagrid_update_grade">
		<form id="update_grade_form" action="videoGrade/updates.do"
			method="post">
			<input type="hidden" id="videoIdUpdate" name="videoId" />
			<table border="0" width="570" class="xxl_tb_1">
				<tbody>
					<!-- 				
					<tr>
						<td  class="xxl_td_1">视频年级：</td>
						<td colspan="2"><input type="text" id="gradeIdUpdate" name="gradeId" /></td>
					</tr>
					-->
					<tr>
						<td  class="xxl_td_1"> 全选 :</td>
						<td><input type="checkbox" id="checkAll" onclick="selectAll()"></td>
					</tr>
					<tr>
						<td class="xxl_td_1" width="100">视频年级：</td>
						<td id="gradeIds"></td>
					</tr>
					<tr>
						<td colspan="3" style="text-align: center"><a
							class="easyui-linkbutton" iconCls="icon-ok"
							onclick="submitUpdateGradeForm('update_grade_form')">修改</a> <a
							class="easyui-linkbutton" iconCls="icon-cancel"
							onclick="cancelUpdateGradeForm()">取消</a></td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
</body>
</html>